<template>
	<div class="geshou">
		<header>
			<van-nav-bar
			  title="歌手"
			  left-arrow
			  @click-left="onClickLeft"
			  style="background: #f7f7f7;"
			></van-nav-bar>
		</header>
		
		<section>
			<router-view ></router-view>
		</section>
		
		<footer>
			<div class="singer_footer">
				<img src="../../build/logo.png" width="41" height="41" style="border-radius: 50%;padding-top: 4px;"/>
				<div class="singer_footers">
					<p>李白</p>
					<p>李荣浩</p>
				</div>
				<span>左</span>
				<span>中</span>
				<span>右</span>
				<span>最右</span>
			</div>
		</footer>
	</div>
</template>

<script>
	import { NavBar ,NoticeBar,Cell, CellGroup} from 'vant'
	
	export default{
		name:"Iview",
		components:{
			[NavBar.name]:NavBar,
			[NoticeBar.name]:NoticeBar,
			[Cell.name]:Cell,
			[CellGroup.name]:CellGroup,
		},
		data(){
			return{
				
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1);
			},
			
		},
	}
</script>

<style>
	.geshou{
		height: 100vh;
	display: flex;
	flex-direction: column;
	}
	section{
	flex: 1;
	overflow: auto;
}

footer{
	display: flex;
	justify-content: space-between;
	height: 50px;
	background: #f1f1f1;
	text-align: center;
	line-height: 50px;
	color: #8C8C8C;
	font-size: 18px;
}
.singer_footer{
	width: 100%;
	display: flex;
	font-size: 14px;
	padding: 0 18px;
	justify-content: space-between;
}
.singer_footer .singer_footers{
	padding-top: 6px;
	margin-right: 80px;
	line-height: 20px;
	text-align:left;
}
</style>